<template>
    <div class="custom-list">        
        <ul class="list-item">
            1、<a href="https://microsoftedge.microsoft.com/addons/detail/aihome%E6%96%B0%E6%A0%87%E7%AD%BE%E9%A1%B5ai%E5%8A%A9%E6%89%8B%E6%B0%B8%E4%B9%85%E5%85%8D%E8%B4%B9chatgp/ionpachkcnbneapalhhjbedeoijdjnhh"
                target="_blank" class="link">
                打开Edge商店
            </a>
        </ul>
        <ul class="list-item">
            2、点击<span class="highlight">获取</span>，如下图：
            <br>
            <img src="@/assets/image/edgeOnline-1.png"
                class="step-image">
            <br>
            <br>
            如果出现<span class="highlight-err">Download interrupted</span>
            <br>
            (1)、打开host文件：C:\Windows\System32\drivers\etc
            <br>
            (2)、在hosts文件里面最后面，添加（不需要添加井号）
            <br>
            131.253.33.219 edge.microsoft.com
            <br>
            131.253.33.219 msedgeextensions.sf.tlu.dl.delivery.mp.microsoft.com
            <br>
            最后保存下host文件，重启下电脑，然后再开机打开edge就可以了！
        </ul>
        <ul class="list-item">
            3、弹出确认框，点击<span class="highlight">添加扩展程序</span>，如下图：
            <br>
            <img src="@/assets/image/edgeOnline-2.png"
                class="step-image-small">
        </ul>
        <ul class="list-item">
            4、在安装页面，或弹出的提示框中，点击<span class="highlight">启用</span>，如下图：
            <br>
            <img src="@/assets/image/edgeOnline-3.png"
                class="step-image">
        </ul>
        <ul class="list-item">
            5、在地址栏输入<span class="highlight">edge://extensions/</span>，并打开AiHome新标签页开关，如下图：
            <br>
            <img src="@/assets/image/edgeOnline-4.png"
                class="step-image">
        </ul>
        <ul class="list-item">
            6、打开一个新标签页，第一次会出现弹框，点击<span class="highlight">保持现状</span>，如下图：
            <br>
            <img src="@/assets/image/chromeOnline-3.png"
                class="step-image-small">
        </ul>
       
    </div>

</template>

<style scoped>
/* 列表样式 */
.custom-list {
    display: inline-block;
}

/* 列表项样式 */
.list-item {
    margin-bottom: 1rem;    
}
/* 链接样式 */
.link {
    font-weight: bold;
    text-decoration: underline;
    color: white;
}
/* 高亮文本样式 */
.highlight,
.highlight-err {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    display: inline-block;
    border-radius: 0.375rem;
    background-color: #60a5fa;
    padding: 5px 8px;
}
.highlight-err{
    background-color: rgb(248 113 113);
}

.step-image {
    margin-top: 1.25rem;
    display: inline-block;
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
}
/* 步骤图片样式（大屏幕） */
@media (min-width: 1024px) {
    .step-image {
        width: 900px;
    }
}

.step-image-small {
    margin-top: 1.25rem;
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
}
/* 步骤小图片样式（大屏幕） */
@media (min-width: 1024px) {
    .step-image-small {
        width: 400px;
    }
}
</style>